<template>
  <div class="split-path-input-wrapper">
    <!-- Bucket Name 标签 -->
    <div class="bucket-label" v-if="prefix">
      <el-icon><Folder /></el-icon>
      <span>Bucket: {{ prefix }}</span>
    </div>

    <div class="split-path-display">
      <!-- 只读前缀部分 -->
      <div class="prefix-part" v-if="prefix">
        <span class="prefix-text">{{ prefix }}</span>
      </div>
      <div class="separator" v-if="prefix">/</div>
      <!-- 可编辑用户输入部分 -->
      <div class="user-input-part">
        <el-input
          :model-value="modelValue"
          :placeholder="placeholder"
          :disabled="disabled || readonly"
          @input="handleInput"
          class="user-input"
        />
      </div>
    </div>
    <!-- 显示完整路径预览 -->
    <div class="full-path-preview" v-if="prefix && modelValue">
      <el-icon><InfoFilled /></el-icon>
      <span>完整路径: {{ fullPathPreview }}</span>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { InfoFilled, Folder } from '@element-plus/icons-vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  prefix: {
    type: String,
    default: '',
  },
  placeholder: {
    type: String,
    default: '',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  readonly: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['update:modelValue', 'change'])

// 完整路径预览
const fullPathPreview = computed(() => {
  if (!props.prefix) return props.modelValue

  // 确保路径正确拼接，避免双斜杠
  const cleanPrefix = props.prefix.replace(/\/$/, '') // 移除前缀末尾的斜杠
  const cleanUserInput = props.modelValue?.replace(/^\//, '') || '' // 移除用户输入开头的斜杠

  return `/${cleanPrefix}/${cleanUserInput}`
})

// 处理用户输入
function handleInput(value) {
  // 移除开头的斜杠（如果用户输入了）
  const cleanValue = value?.replace(/^\/+/, '') || ''

  emit('update:modelValue', cleanValue)
  emit('change', cleanValue)
}
</script>

<style scoped lang="scss">
.split-path-input-wrapper {
  width: 100%;

  .bucket-label {
    margin-bottom: 8px;
    font-size: 13px;
    color: #606266;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;

    .el-icon {
      font-size: 16px;
      color: #409eff;
    }

    span {
      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    }
  }

  .split-path-display {
    display: flex;
    align-items: center;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    overflow: hidden;
    background-color: #fff;

    &:hover {
      border-color: #c0c4cc;
    }

    &:focus-within {
      border-color: #409eff;
    }

    .prefix-part {
      flex-shrink: 0;
      padding: 0 12px;
      background-color: #f5f7fa;
      border-right: 1px solid #dcdfe6;
      display: flex;
      align-items: center;
      height: 32px;

      .prefix-text {
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
        font-size: 13px;
        color: #409eff;
        font-weight: 500;
        white-space: nowrap;
      }
    }

    .separator {
      flex-shrink: 0;
      padding: 0 4px;
      color: #909399;
      font-weight: bold;
      background-color: #f5f7fa;
    }

    .user-input-part {
      flex: 1;
      min-width: 0;

      .user-input {
        :deep(.el-input__wrapper) {
          box-shadow: none;
          border: none;
          padding: 1px 11px;
        }

        :deep(.el-input__inner) {
          font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
          font-size: 13px;
        }
      }
    }
  }

  .full-path-preview {
    margin-top: 4px;
    font-size: 12px;
    color: #909399;
    display: flex;
    align-items: center;
    gap: 4px;

    .el-icon {
      font-size: 14px;
    }

    span {
      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
      word-break: break-all;
    }
  }
}
</style>
